<template>
<div class="panel">
    <div class="panel-header">
        <div class="bl"></div>
        <div class="title">合同详情</div>
    </div>
    <div class="panel-body">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="top" label-width="150px">
            <el-form-item label="门店" prop="store_id" required>
                <picker-view type="store" v-model="ruleForm.store_id" @change="changeStore" tips="请选择门店"></picker-view>
            </el-form-item>

            <el-form-item label="套餐" prop="package_id" required>
                <el-select v-model="ruleForm.package_id" placeholder="请选择套餐">
                    <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="入住日期" prop="start_time" required>
                <el-date-picker v-model="ruleForm.start_time" type="date" value-format="yyyy-MM-dd" placeholder="请选择入住日期"></el-date-picker>
            </el-form-item>

            <el-form-item label="离店时间" prop="end_time" required>
                <el-date-picker v-model="ruleForm.end_time" type="date" value-format="yyyy-MM-dd" placeholder="请选择离店时间"></el-date-picker>
            </el-form-item>

            <el-form-item label="签约时间" prop="sign_date" required>
                <el-date-picker v-model="ruleForm.sign_date" type="date" value-format="yyyy-MM-dd" placeholder="请选择签单时间"></el-date-picker>
            </el-form-item>

            <el-form-item label="合同总额" prop="totals" required>
                <el-input type="number" v-model="ruleForm.totals" placeholder="请输入合同总金额"></el-input>
            </el-form-item>

            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="ruleForm.remark" placeholder="请输入订单备注信息"></el-input>
            </el-form-item>

            <el-form-item label="合同附件" prop="files" required>
                <upload-files ref="filesRef" v-model="ruleForm.files"></upload-files>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>

<script>
import pickerView from "@/components/picker/select.vue";
import uploadFiles from '@/components/upload/files.vue';
import sourcePickerView from "@/components/picker/source.vue";
import { getPackageListApi } from "@/api/system/dictionary/package.js";


const ruleForm = {
    store_id: "",
    package_id: "",
    start_time: "",
    end_time: "",
    sign_date: "",
    totals: "",
    remark: "",
    files: [],
}

export default {
    components: {
        pickerView,
        uploadFiles,
        sourcePickerView,
    },
    data() {
        return {
            packageList: [],
            roomList: [],
            ruleForm: Object.assign({}, ruleForm),
            rules: {
                store_id: [{
                    required: true,
                    message: "请选择门店",
                }],
                package_id: [{
                    required: true,
                    message: "请选择套餐",
                }],
                start_time: [{
                    required: true,
                    message: "请选择入住日期",
                }],
                end_time: [{
                    required: true,
                    message: "请选择离店时间",
                }],
                sign_date: [{
                    required: true,
                    message: "请选择签约时间",
                }],
                totals: [{
                    required: true,
                    message: "请录入合同金额",
                    trigger: "blur"
                }],
                files: [{
                    required: true,
                    message: "请上传合同凭证",
                }],
            },
        }
    },
    methods: {
        changeStore(e) {
            if (e.id > 0) {
                getPackageListApi({ store_id: e.id }).then(res => {
                    this.packageList = res.data;
                })
            } else {
                this.ruleForm.package_id = "";
                this.packageList = [];
            }
        },
        clearFiles() {
            this.$nextTick(() => {
                this.$refs['filesRef'].clearFiles();
            })
        },
        async submit() {
            await this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    return valid;
                } else {
                    throw "触发错误"
                }
            })
        }
    }
}
</script>

<style>

</style>
@/api/system/dictionary/room.js
